<template>
  <div class="line-echart">
    <base-chart id="chartsMax" :options="options" :height="height" />
  </div>
</template>

<script setup>
import BaseChart from '@/base-ui/echart/base-chart.vue'
import { computed, reactive, watch } from 'vue'
const props = defineProps({
  height: {
    type: String,
    default: ''
  }
})
const options = computed(() => {
  return {
    color: ['#5793f3', '#d14a61', '#675bba'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      data: [
        { name: '水位', itemStyle: { opacity: 0 } },
        { name: '保证水位', itemStyle: { opacity: 0 } },
        { name: '警戒水位', itemStyle: { opacity: 0 } }
      ]
    },
    // grid: [{ x: '8%', y: '20%', height: '30%' }],
    //多个图，就要定义多个x轴，虽然我这个表的x轴是一样的

    yAxis: {
      type: 'value',
      name: '水位',
      minorSplitLine: {
        show: true
      }
    },
    //y轴，不管有几个x轴，几个y轴，或者图，只要找到他对应的grid图的序号索引就可以精准匹配

    xAxis: {
      type: 'value',
      name: '流量（m³/s）',
      splitLine: { show: false },
      data: [1, 3, 4, 7, 8, 9, 10, 11, 12]
    },

    //数据就要选择是哪个x,y轴与之对应
    series: [
      {
        name: '水位',
        type: 'line',
        // showSymbol: false,
        smooth: true,
        stack: '水位',

        data: [10, 20, 30, 40, 50, 60, 70, 80, 90],
        min: 0
      },

      {
        name: '保证水位',
        type: 'line',
        smooth: true,
        showSymbol: false,

        stack: '保证水位',

        data: [50],
        // min:0
        markLine: {
          symbol: 'none', // 去掉标线最后面的箭头
          data: [
            {
              silent: false, // 鼠标悬停事件  true没有，false有
              lineStyle: {
                type: 'solid'
                // color: '#FF0000'
              },
              label: {
                position: 'insideEndBottom', // start middle end
                formatter: '保证水位：{c} m'
              },
              name: '保证水位',
              yAxis: 50
            }
          ]
        }
      },

      {
        name: '警戒水位',
        type: 'line',
        smooth: true,
        showSymbol: false,

        stack: '警戒水位',
        data: [20],
        markLine: {
          symbol: 'none', // 去掉标线最后面的箭头
          data: [
            {
              silent: false, // 鼠标悬停事件  true没有，false有
              lineStyle: {
                type: 'solid'
                // color: '#FF0000'
              },
              label: {
                position: 'insideEndBottom', // start middle end
                formatter: '警戒水位：{c} m'
              },
              name: '警戒水位线',
              yAxis: 20
            }
          ]
        }
      }
    ]
    // dataZoom: [
    //   {
    //     type: 'slider',
    //     show: true,
    //     height: 20,
    //     bottom: '0%',
    //     start: 0,
    //     end: 100
    //   },
    //   {
    //     type: 'inside'
    //   }
    // ],
    // toolbox: {
    //   //
    //   show: true
    // }
  }
})
</script>
<style lang="less" scoped>
.line-echart {
  height: 100%;
}
</style>

